<template>
  <div class="app-container">
    <el-select v-model="pairName" placeholder="交易对">
      <el-option v-for="item in appGlobal.PairList" :key="item" :label="item" :value="item" />
    </el-select>趋势命令列表
    <table v-loading="loading">
      <tr v-for="item in periodList" :key="item.name">
        <td>周期{{ item.name }}:</td>
        <td>
          <el-button-group>
            <el-button :loading="item.loading" type="success" @click="trendSet(item, 1)">多</el-button>
            <el-button :loading="item.loading" type="danger" @click="trendSet(item, -1)">空</el-button>
            <el-button :loading="item.loading" type="primary" @click="trendSet(item, 2)">中间</el-button>
            <el-button :loading="item.loading" @click="trendSet(item, 0)">未知</el-button>
          </el-button-group>

        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import sapi from '@/api/sysApi'
export default {
  data() {
    return {
      loading: false,
      pairName: 'BTCUSDT',
      periodList: [
        { loading: false, name: '1m', period: 60, sign: 'OneMinute,' },
        { loading: false, name: '"3m"', period: 3 * 60, sign: 'ThreeMinutes,' },
        { loading: false, name: '"5m"', period: 5 * 60, sign: 'FiveMinutes,' },
        { loading: false, name: '"15m"', period: 15 * 60, sign: 'FifteenMinutes,' },
        { loading: false, name: '"30m"', period: 30 * 60, sign: 'ThirtyMinutes,' },
        { loading: false, name: '"1h"', period: 3600, sign: 'OneHour,' },
        { loading: false, name: '"2h"', period: 2 * 3600, sign: 'TwoHours,' },
        { loading: false, name: '"4h"', period: 4 * 3600, sign: 'FourHours,' },
        { loading: false, name: '"6h"', period: 6 * 3600, sign: 'SixHours,' },
        { loading: false, name: '"8h"', period: 8 * 3600, sign: 'EightHours,' },
        { loading: false, name: '"12h"', period: 12 * 3600, sign: 'TwelveHours,' },
        { loading: false, name: '"1d"', period: 24 * 3600, sign: 'OneDay,' },
        { loading: false, name: '"3d"', period: 3 * 24 * 3600, sign: 'ThreeDays,' },
        { loading: false, name: '"1w"', period: 7 * 24 * 3600, sign: 'OneWeek,' },
        { loading: false, name: '"1M"', period: 30 * 24 * 3600, sign: 'OneMonth' }
      ]
    }
  },
  created() {
    this.robotId = this.$route.query.robotId
    this.robotName = this.$route.query.robotName
  },
  mounted() {
    sapi.getRobotList().then((data) => {
      if (data) {
        this.robotList = data
      }
    })
  },
  methods: {
    rest(item) {
      sapi.RestartRobot(item.id).then((p) => {
        if (p) item.status = 1
      })
    },
    stop(item) {
      sapi.StopRobot(item.id).then((p) => {
        if (p) item.status = 0
      })
    },
    trendSet(trendObj, trend) {
      // trendObj.loading = true
      this.loading = true
      sapi.TrendSet(trendObj.period, trend, this.pairName)
        .then(p => this.$message(`${trendObj.name},趋势${trend},发送成功`))
        .catch(p => this.$message(`${trendObj.name},趋势${trend},发生异常:${p}`))
        .finally(p => {
          this.loading = false
          // trendObj.loading = false
        })
    },
    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

